<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head th:include="include/adminHeader::html('样本管理')" />

<body>
	<div th:replace="include/adminNavigator::html"></div>
	<div id="workingArea">
		<!-- 显示样本 -->
		<h1 class="label label-info">样本管理</h1>
		<!-- 上传样本 -->
		<ul id="myTab" class="nav nav-tabs">
			<li class="active"><a href="#database" data-toggle="tab">数据库</a></li>
			<li><a href="#doneExcel" data-toggle="tab">Excel文件</a></li>
			<li><a href="#donefile" data-toggle="tab">结构化文件</a></li>
		</ul>
		
		<div id="myTabContent" class="tab-content">
			<div class="tab-pane active" id="database">
				<br>				
				<p>连接数据库 读取样本数据</p>
				<br><br><br><br><br><br><br><br>
				
				<div class="panel panel-warning addDiv">
					<div class="panel-heading">新增样本</div>
					<div class="panel-body">
						<table class="addTable">
							<tr>
								<td>数据库</td>
								<td>
									<select @keyup.enter="add" v-model.trim="bean.database" type="text" class="form-control">
										<option>临时站</option>
										<option>测试站</option>
									</select>
								</td>
							</tr>
							<tr>
								<td>样本记录ID</td>
								<td><input id="categoryPic" accept=".txt" type="file"
									name="text" @change="getFile($event)" />
								</td>
							</tr>

							<tr class="submitTR">
								<td colspan="2" align="center"><a href="#nowhere"
									@click="add" class="btn btn-success">提交</a>
								</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
			<div class="tab-pane" id="donefile">
				<p>解析结构化文件，读取样本数据（待开发）</p>
			</div>
			<div class="tab-pane" id="doneExcel">
				<p>excel样本数据（待开发）</p>
			</div>
		</div>

		
		<br> <br>
		
		<!--配置表 -->
		<div class="listDataTableDiv">
			<table
				class="table table-striped table-bordered table-hover  table-condensed">
				<thead>
					<tr class="success">
						<th v-for='item in columnList'>{{item.name}}</th>
					</tr>
				</thead>
				<tbody>
					<!-- 
					<tr v-for='item in inforList'>
						<td v-for='it in columnList'>{{item[it]}}</td>
					</tr>
					 -->
				</tbody>
			</table>
		</div>

	</div>
</body>

<script>
	var taskId = getUrlParms("taskId");
	var data4Vue = {
		uri : 'samples',
		// 表头
		columnList : [],
		column : {
			name : '',
			type : ''
		},
		file: null,
		bean : {taskId:0,database:'测试站'},

	};
	// 数据模型
	var vue = new Vue({
		el : '#workingArea',
		data : data4Vue,
		//mounted　表示这个 Vue 对象加载成功了
		mounted : function() {
			// 更新该任务样本数据
			this.updateSampleDatas(taskId);
			// this.list(0);
		},
		methods : {
			updateSampleDatas : function(taskId) {
				var url = "sampleManager/updateSampleDatas/" + taskId;
				axios.get(url).then(function(response) {
					vue.columnList = response.data;
				})
			},
			
			list:function(start){
                var url =  this.uri+ "?start="+start + "&taskId="+ taskId;
                axios.get(url).then(function(response) {
                    vue.pagination = response.data;
                    vue.beans = response.data.content;
                });
            },
            
	        add: function () {	            
	            var url = this.uri;
	            //axios.js 
	            var formData = new FormData();
	            formData.append("taskId",  taskId);
	            formData.append("database", this.bean.database);
	            formData.append("txtfile", this.file);
	            axios.post(url,formData).then(function(response){
	            	// 返回结果判断
	            	vue.list(0);
	                vue.bean = {tableId: 0,taskId: 0, tableName: '', tableType:'',mainFields:'',relatFields:'',caltFields:''};
	                
	            });
	            
	        },
	        deleteBean: function (id) {
	            if(!checkDeleteLink())
	                return;
	            var url = this.uri+"/"+id;
	            axios.delete(url).then(function(response){
	                if(0!=response.data.length){
	                    alert(response.data);
	                }
	                else{
	                    vue.list(0,taskId);
	                }
	            });
	        },
	        // 文件
	        getFile: function (event) {
                this.file = event.target.files[0];
            },
	        // 翻页 定义在adminHeader.html中
	        jump: function(page){	        	
	            jump(page,vue); 
	        },
	        jumpByNumber: function(start){
	            jumpByNumber(start,vue);
	        }

		}
	});
</script>

</html>
